<template>
  <view class="h-100p">
    <hx-navbar ref="hxnb" :config="config">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <clHeadTab :modelData="modelData" @change="tabChange"></clHeadTab>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="m-t-140 h-74p scroll-y">
      <info :data="listData" v-show="componentsName == 'info'" ref="info"></info>
      <contact :data="listData" v-show="componentsName == 'contact'" ref="contact"></contact>
      <accounts :data="listData" v-show="componentsName == 'accounts'" ref="accounts"></accounts>
      <!-- <invoicing :data="listData" v-show="componentsName == 'invoicing'" ref="invoicing"></invoicing> -->
    </view>

    <view class="fixed-btn" v-if="componentsName != 'info'">
      <u-button text="保存" @click="save()" type="primary" shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
    </view>
    <view class="fixed-btn flex" v-if="componentsName == 'info'">
      <u-button text="名片识别" type="primary" class="card-btn" shape="circle" color="#ddf0ff" border="none"></u-button>
      <u-button text="保存" type="primary" class="save-btn" shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
        @click="save"></u-button>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import clHeadTab from "@/components/cl-head-tab/cl-head-tab.vue";
import clIcon from "@/components/cl-icon/cl-icon.vue";
import info from "./info/info.vue";
import contact from "./contact/contact.vue";
import accounts from "./accounts/accounts.vue";
import invoicing from "./invoicing/invoicing.vue";
import { addData, initAddData, getVoDataById } from "@/apis/bill/information/custom";
// import other from "./other/other.vue";
// import consignee from "./consignee/consignee.vue";
export default {
  components: {
    clIcon,
    clHeadTab,
    info,
    // other,
    contact,
    accounts,
    invoicing,
    // consignee,
  },
  data() {
    return {
      componentsName: "info",
      search: null,
      modelData: [
        { label: "信息", name: "info" },
        { label: "联系", name: "contact" },
        // { label: "收货单位", name: "consignee" },
        { label: "帐号", name: "accounts" },
        // { label: "开票", name: "invoicing" },
      ],
      config: {
        title: "客户",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      listData: {
        code: "", //编号
        name: "", //名称
        type: "", //布匹id
        typeName: "", //布匹
        originDebt: null, //欠款
        creditAmount: null, //信用额度
        employeeName: "", //业务员name
        employeeId: "", //业务员id
        catName: "", //分类
        catId: "", //分类

        shopName: "", //门店
        shopId: "", //门店
        settlementTypeName: "", //结款方式
        settlementTypeId: "", //结款方式

        priceModelName: null, //价格模式
        priceModelId: null, //价格模式

        orgType: 0, //组织性质
        orgTypeName: "", //组织性质
        labels: [], //标签
        customerLabelList:[],
        goodsTypeName: "", //做货类型
        goodsTypeId: "", //做货类型
        isInvoice: true, // 是否开票
        isEnable: true, // 是否开启
        remarks: "", // 备注
      },
      id: null
    };
  },
  computed: {},
  mounted() {
    if (this.$Route.query.id) {
      this.getDataItem(this.$Route.query.id)
    } else {
      this.getInitAddData()
    }
  },
  onLoad(){
    // 业务员
    uni.$on('on-staff-custom-details', (data)=>{
      this.listData.employeeName = data.realName;
      this.listData.employeeId = data.id;
      uni.$off('on-staff-custom-details')
    })
    // 分类
    uni.$on('on-selected-customer', (data)=>{
      this.listData.catName = data.name;
      this.listData.catId = data.id;
      uni.$off('on-selected-customer')
    })
    // 结款方式
    uni.$on('on-payment-method', (data)=>{
      this.listData.settlementTypeName = data.name;
      this.listData.settlementTypeId = data.id;
      uni.$off('on-payment-method')
    })
    // 价格模式
    uni.$on('on-age-price-profile', (data)=>{
      this.listData.priceModelName = data.label;
      this.listData.priceModelId = data.value;
      uni.$off('on-age-price-profile')
    })
    // 做货类型
    uni.$on('on-type-of-goods-produced', (data)=>{
      this.listData.goodsTypeName = data.label;
      this.listData.goodsTypeId = data.value;
      uni.$off('on-type-of-goods-produced')
    })
    // 标签
    uni.$on('on-lable-page',data =>{
      this.listData.customerLabelList = data
      this.listData.labels = data.map(item => item.id);
    })
    
  },
  methods: {
    getDataItem(id) {
      getVoDataById(id).then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.listData = data
      });
    },
    getInitAddData() {
      initAddData().then((res) => {
        if (!res.flag) return;
        this.listData = res.data || {};
      });
    },
    save() {
      let item = Object.assign(this.listData, this.$refs.info.listData)
      item.customerContactInfoList = this.$refs.contact.customerContactInfoList
      item.customerAccountList = this.$refs.accounts.customerAccountList
      // item.processorInvoiceInfo = this.$refs.invoicing.processorInvoiceInfo // 没有开票信息
      addData(item).then((res) => {
        if (!res.flag) return;
        this.$refs.uToast.show({
          type: 'success',
          title: '',
          message: "保存成功",
          complete() {
            uni.navigateBack()
          }
        })
      });
    },
    tabChange(item) {
      this.componentsName = item.name;
    },
  },
  beforeDestroy() {
    uni.$off("on-lable-page");
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

.fixed-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx 20rpx;
  background: #fafafa;

  .card-btn {
    color: #409eff !important;
    border-radius: 40rpx 0 0 40rpx;
  }

  .save-btn {
    border-radius: 0 40rpx 40rpx 0;
  }
}
</style>
